<!-- 页眉 -->
{include file="public/header" /}
<!-- 导航 -->
{include file="public/nav" /}
<!-- 主体 -->
<style type="text/css">
    #search_auto { position: absolute; display: none; z-index: 100; Margin-top: 1px; border: 1px solid #4783EB; padding: 0px;}
    #search_auto ul { margin-bottom: 0px; padding: 0px; list-style-type: none; }
    #search_auto li { background: #FFF; text-align: left; padding-left: 5px; }
    #search_auto li.cls { text-align: right; background: #EFF0EF; padding-right: 5px; }
    #search_auto li a { display: block; cursor: pointer; color: #666; }
    #search_auto li a:hover { text-decoration: none; color: #000;}
</style>
<div class="layui-fluid" id="main">
    <div class="layui-row" style="margin-top: 50px; ">
        <div class="layui-col-md4 layui-col-md-offset4" style="text-align: center">
            <img src="/static/img/logo_b.png" style="border: 0px">
        </div>
    </div>
    <div class="layui-row" style="margin-top: 50px; ">
        <div class="layui-col-md12">
            <form class="layui-form" method="post" action="{:url('Index/Search')}">
                <div class="layui-form-item" style="width: 600px; margin: 0 auto">
                    <div class="layui-input-inline" style="width: 350px;">
                        <input name="keyword" lay-verify="keyword" id="keyword" autocomplete="off" placeholder="请输入搜索关键词" class="layui-input" type="text">
                    </div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <select name="cid" lay-verify="cid" id="lists">
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 80px; padding-right: 10px;">
                        <button class="layui-btn" lay-submit="" lay-filter="searchButton">搜一下</button>
                    </div>
                    <div style="width: 348px; margin-top: 39px" id="search_auto"></div>
                </div>
            </form>
        </div>
    </div>

</div>

<!-- 控制脚本 -->
<script src="/static/ie8/jquery.1.11.3.min.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['element', 'layer', 'form'], function(){
        var element = layui.element
            ,form = layui.form
            ,$ = layui.$;

        //自定义验证规则
        form.verify({
            keyword: function(value){
                if(value.length < 3){
                    return '亲，关键词太少了，多输2个字符再试试';
                }
            },
            cid: function(value){
                if(value.length =='' ){
                    return '亲，还没选要查询的数据库呢';
                }
            }
        });

        //获取数据库列表
        $.get('{:url(\'api/Search/getTableList\')}',function (data) {
            if (data != void(0)){
                var $htmlStr = '<option value=""></option>';
                for(var i in data){
                    $htmlStr += '<option value="'+data[i].cid+'">'+data[i].name+'</option>';
                }
                $('#lists').html($htmlStr);
                form.render('select');
            }
        });
    });

    $('.layui-input').keyup(function () {
        $.post('{:url(\'/api/Search/keyword\')}',{
            keyword: $(this).val()
        },function (data) {
            var str = '';
            if (data == void(0)) {
                str = '<li>无类似关键词</li>';
            } else {
                for (var i = 0; i < data.length; i++) {
                    str = str + '<li><a href="javascript:void(0)" onclick="visits(\'' + data[i].keyname + '\')">' + data[i].keyname + '</a></li>';
                }
            }
            str = '<ul>' + str + '<li class="cls"><a href="javascript:void(0)" onclick="$(this).parent().parent().parent().fadeOut(100)">关闭</a></li></ul>';
            $('#search_auto').html(str).css('display', 'block');
        });
    });

    function visits(str) { $('#keyword').val(str); }
</script>
<!-- 页脚 -->
{include file="public/footer" /}